import FormProps from "@/types/typesInForm/FormProps";
import { Button, Form, Input } from "antd";
import { baseURL } from "config";
import { formCommit } from "utils/formCommit";
import { GitValueType } from "../../types/typesInForm/GitValueType";
import VisFragment from "../../types/VisFragment";

const RemoteForm = (formProps: FormProps) => {
  const onFinish = async (values: GitValueType) => {
    const { setData, setSpinning } = formProps;
    setSpinning(true);
    const res: VisFragment | null = await formCommit(
      { ...values, ifLocal: false },
      baseURL + "/git"
    );
    if (!!res) {
      setData({
        fragment: res,
        ifSuccessful: true,
      });
    }
    setSpinning(false);
  };

  return (
    <Form {...formProps.formLayout} onFinish={onFinish}>
      <Form.Item
        label="远程仓库地址"
        name="repoIdentifier"
        rules={[
          { required: true, message: "远程仓库地址必填！" },
          {
            type: "url",
            warningOnly: false,
            message: "请输入有效的远程仓库地址！",
          },
        ]}
      >
        <Input placeholder="请输入远程仓库地址" />
      </Form.Item>

      <Form.Item
        label="初始提交哈希"
        name="startCommit"
        rules={[{ required: true, message: "初始提交哈希必填！" }]}
      >
        <Input placeholder="请输入初始提交哈希" />
      </Form.Item>

      <Form.Item
        label="变更后提交哈希"
        name="endCommit"
        rules={[{ required: true, message: "变更后提交哈希必填！" }]}
      >
        <Input placeholder="请输入变更后提交哈希" />
      </Form.Item>
      <Form.Item>
        <Button type="primary" htmlType="submit">
          提交
        </Button>
      </Form.Item>
    </Form>
  );
};
export default RemoteForm;
